<!DOCTYPE html style="height:100%" >

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>Aufstellorte der PFFM KG</title>
    
    <link type="text/css" 
    	  href="tabs/css/flick/jquery-ui-1.8.16.custom.css" 
          rel="stylesheet" />	
          
        <!-- Google Maps API -->
        <script type="text/javascript" 
	 		 src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
        </script>  
		
        <!-- JQuery -->
		<script type="text/javascript" 
				src="tabs/js/jquery-1.6.2.min.js">
		</script>
        
        <!-- Routen Error Management -->
        <script type="text/javascript" 
				src="js/routeError.js">
		</script>
       
        <!-- JQuery UI (Accordion) -->
		<script type="text/javascript" 
				src="tabs/js/jquery-ui-1.8.16.custom.min.js">
		</script>
		
        <!-- Accordion initialisieren -->
		<script type="text/javascript">
			$(function(){
				
				// Icons Definieren
				var icons = {
					header: "ui-icon-circle-arrow-e",
					headerSelected: "ui-icon-circle-arrow-s"
				};

				// Accordion initialisieren
				$("#accordion").accordion({ icons: icons, 
											header: "h3" });
				
				// Hover-States
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
				// Tab Kategorien --> Alle Kunden anzeigen
				$('#kategorienHead').click(function(){		
					directionsDisplay.setMap(null);	
					document.getElementById("chk_all").checked = true;
					showHideAll(document.getElementById("chk_all"));
				})
				
				// Tab Route --> Alle Kunden ausblenden , Route anzeigen
				$('#routeHead').click(function(){
					directionsDisplay.setMap(map);
					document.getElementById("chk_all").checked = false;
					showHideAll(document.getElementById("chk_all"));
				})
				
				// Tab goTo --> Alle Kunden einblenden
				$('#gotoHead').click(function(){
					directionsDisplay.setMap(null);
					document.getElementById("chk_all").checked = true;
					showHideAll(document.getElementById("chk_all"));
				})
			});
		</script>
        
    <script type="text/javascript">
	
    // DirectionsRenderer
	var directionsDisplay = new google.maps.DirectionsRenderer();
	
	// DirectionsService
	var directionsService = new google.maps.DirectionsService();

	// Vordefinierte Skalierungen der Karte
	var geo_nord = new google.maps.LatLng(53.553813, 9.991585);
	var geo_sued = new google.maps.LatLng(48.0909503, 10.879169);
	var geo_west = new google.maps.LatLng(49.8724245, 8.650857);
	var geo_ost = new google.maps.LatLng(51.5551977, 12.9992056);
	var geo_home = new google.maps.LatLng(49.2477789, 7.3585368);
	var geo_deutschland = new google.maps.LatLng(51.188188, 10.052670);
	
	// Karte initialisieren
	var map = null;
	
	 // Definieren der Icons
    var customIcons = {
      massage: {
        icon: './icons/massage.png',
      }, 
	  office: {
        icon: './icons/office.png',
      }, 
	  airport: {
        icon: './icons/airport.png',
      }, 
	  shopping: {
        icon: './icons/shopping.png',
      }, 
	  fitness: {
        icon: './icons/fitness.png',
      },
	  wellness: {
        icon: './icons/wellness.png',
      },
	  hotel: {
        icon: './icons/hotel.png',
      },
	  railway: {
        icon: './icons/railway.png',
      },
	  casino: {
        icon: './icons/casino.png',
      }
    };
	
	// Array welches alle Marker auf der Karte
	// aufnimmt und global verfügbar macht
	var gmarkers = [];
	
	// Ermittlung des optimalen Zoomfaktors
	// und der Ausrichtung der Karte auf alle Kunden
	var latlngbounds = new google.maps.LatLngBounds();

	// Karte initialisieren
    function load() {
      map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: 'terrain',
		navigationControl: false,
  		mapTypeControl: false,
  		scaleControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      // Alle Kunden aus der Datenbank
	  // laden und auf der Karte darstellen
      downloadUrl("getAllMarkers.php", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
		
		// Die einzelnen Marker auf der Karte setzen
        for (var i = 0; i < markers.length; i++) {
          	
			// Daten auslesen
			var name = markers[i].getAttribute("map_id");
          	var type = markers[i].getAttribute("map_type");
       
	   		// Point-Objekt mit den Koordinaten des Markers erstellen
		  	var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("map_geoX")),
              parseFloat(markers[i].getAttribute("map_geoY"))
			);
			
			// Das latlngbounds Objekt um den zuvor 
			// erstellten Punkt erweitern
		  	latlngbounds.extend(point);
			
			// Icon setzen
          	var icon = customIcons[type] || {};
		  
		  	// Marker erstellen
          	var marker = new google.maps.Marker({
				map: map,
				position: point,
				icon: icon.icon,
				shadow: icon.shadow,
				type: type
         	});
		  
		  	// Marker zum Array gmarkers hinzufügen
			// um wieder darauf zugreifen zu können
		  	gmarkers.push(marker);
        }
      });
	  
	  // Die Karte so skalieren, dass alle
	  // auf der Karte dargestellten Marker sichtbar sind
	  map.fitBounds(latlngbounds);
    }
	
	// Externe Daten laden
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          callback(request.responseText, request.status);
        }
      };

	  // AJAX-Request senden
      request.open('GET', url, false);
      request.send(null);
    }

	// XML parsen...
    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
		
      } else if (window.DOMParser) {
        	return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }


	// Alle Marker eines bestimmten Typs ausblenen
	function hide(type){
	  for (var i = 0; i < gmarkers.length; i++) {
        if(gmarkers[i].type == type){
		gmarkers[i].setVisible(false);
		}
	  }
  	}
  
    // Alle Marker eines bestimmten Typs einblenden
  	function show(type){
	  for (var i = 0; i < gmarkers.length; i++) {
		if(gmarkers[i].type == type){
        gmarkers[i].setVisible(true);
		}
	  }
  	}
  
  	// Karte auf einen bestimmten Punkt ausrichten
 	function goTo(myplace, myzoom){
		map.panTo(myplace);
		map.setZoom(myzoom);  
  	}
  
    // Abfrage ob eine Checkbox angeklickt bzw.
	// nicht angeklckt ist. Je nach Zustand werden
	// die Marker ein bzw. ausgeblendet
	
	// Alle Checkboxen aktiviert --> Checkbox "Alle Kategorien anzeigen" aktiv
  	function boxclick(box,type) {
		if (box.checked) {
		  show(type);
		   if((document.getElementById("chk_airport").checked == true) &&
		     (document.getElementById("chk_casino").checked == true) &&
			 (document.getElementById("chk_fitness").checked == true) &&
			 (document.getElementById("chk_hotel").checked == true) &&
			 (document.getElementById("chk_massage").checked == true) &&
			 (document.getElementById("chk_office").checked == true) &&
			 (document.getElementById("chk_railway").checked == true) &&
			 (document.getElementById("chk_shopping").checked == true) &&
			 (document.getElementById("chk_wellness").checked == true)){
			  	document.getElementById("chk_all").checked = true; 
			 }
		} 
		
		// Eine Checkbox nicht aktiv --> "Alle Kategorien anzeigen" inaktiv
		else {
		  document.getElementById("chk_all").checked = false;
		  hide(type);
		}
  	};

	// Alle Kunden anzeigen / ausblenden
	// Aktiviert bzw Deaktiviert alle Checkboxen der
	// einzelnen Kategorien
	function showHideAll(box) {
		if (box.checked) {
			  document.getElementById("chk_airport").checked = true;
			  document.getElementById("chk_casino").checked = true;
			  document.getElementById("chk_fitness").checked = true;
			  document.getElementById("chk_hotel").checked = true;
			  document.getElementById("chk_massage").checked = true; 
			  document.getElementById("chk_office").checked = true;
			  document.getElementById("chk_railway").checked = true;
			  document.getElementById("chk_shopping").checked = true;
			  document.getElementById("chk_wellness").checked = true; 
			  document.getElementById("chk_all").checked = true;
			  
			  // Alle Marker sichtbar
			  for (var i = 0; i < gmarkers.length; i++) {
				gmarkers[i].setVisible(true);
			  } 
		} 
		else {
			  document.getElementById("chk_airport").checked = false;
			  document.getElementById("chk_casino").checked = false;
			  document.getElementById("chk_fitness").checked = false;
			  document.getElementById("chk_hotel").checked = false;
			  document.getElementById("chk_massage").checked = false; 
			  document.getElementById("chk_office").checked = false;
			  document.getElementById("chk_railway").checked = false;
			  document.getElementById("chk_shopping").checked = false;
			  document.getElementById("chk_wellness").checked = false; 
			 
			  // Alle Marker unsichtbar
			  for (var i = 0; i < gmarkers.length; i++) {
				gmarkers[i].setVisible(false);
			  } 
		}
  	};
	
	  // Ausdrucken der Route
	  function printRoute(){
		
		// Start und Zielpunkt der Route
		var start = document.getElementById("txt_yourhome").value;
		var ziel = "Zweibrücken, Poststr.19";
		
		// Zieladresse der Anfrage
		var routeString = "http://maps.google.com/maps?q=";
		
		// Erweiterung --> Startpunkt
		routeString+="from:"+start; 
		
		// Erweiterung --> Zielpunkt
		routeString+=" to:"+ziel; 
		
		// Druckansicht öffnen
		window.open(routeString);
	  }
	
	// Berechnet die Route von einem angegebenem
	// Startpunkt zur Firmenzentrale und stellt
	// den Weg auf der Karte dar
  	function myRoute(){
		
		// Alle Marker von der Karte ausblenden
		showHideAll(false);
		
		// Alle Checkboxen der Kategorien auf false setzen
		document.getElementById("chk_all").checked = false;
		
		// Startpunkt der Route
		var start = document.getElementById("txt_yourhome").value;
		
		// Zielpunkt der Route
		var end = "Zweibrücken, Poststr.19";
	
		// Request
		var request = {
			origin:start, 
			destination:end,
			optimizeWaypoints: true,
			travelMode: google.maps.DirectionsTravelMode.DRIVING,
			provideRouteAlternatives: true,
		};
		
		// Routenanfrage absetzen
		directionsService.route(request, function(result, status) {
			
			// Konnte eine Route berechnet werden?
			// JA --> Route kann ausgedruckt werden
			if (status == google.maps.DirectionsStatus.OK) {
				$('#buttonPrint').fadeIn(500);
		    	directionsDisplay.setDirections(result);
			}
			
			// NEIN --> Fehlermeldung anzeigen
			else{
				routeError(status);	
				$('#buttonPrint').fadeOut(500);
			}
		});
		
		// Route auf der Karte darstellen
		directionsDisplay.setMap(map);
	}

  </script>

  <link href="css/places.css" 
  	    rel="stylesheet" 
        type="text/css">
        
  <link href="css/error.css" 
  		rel="stylesheet" 
        type="text/css">
  
</head>

<body style="height:100%" leftmargin="0" topmargin="0"
  			 marginwidth="0" marginheight="0" onload="load();">
         
  <!-- Fehleranzeige -->      
  <div id="errorInfo" class="errorInfo">
  
  </div>
               
  <!-- Google Maps Karte -->    
  <div id="map" style="width:100%; height:100%;">
  
  </div>
  
  <!-- Steuerungselemente -->
  <div id="controlpanel" class="controlPanel">

  <!-- Accordion Navigation mit jeweiligem Inhalt -->
  <div id="accordion">
    
    	<!-- CONTENT: Kategorien -->
	  	<div id ="kategorien">
	    	<h3><a id="kategorienHead" href="#">Kategorien</a></h3>
				<div>
                  <p>
                    <input type="checkbox" id="chk_office" class="checkBox" onClick="boxclick(this,'office')" checked="checked"/>
                    <img src="icons/office.png" width="32" height="37">
                    <input type="checkbox" id="chk_massage" class="checkBox" onClick="boxclick(this,'massage')" checked="checked"/>
                    <img src="icons/massage.png" width="32" height="37">
                    <input type="checkbox" id="chk_casino" class="checkBox" onClick="boxclick(this,'casino')" checked="checked"/>
                    <img src="icons/casino.png" width="32" height="37">
                    <input type="checkbox" id="chk_airport" class="checkBox" onClick="boxclick(this,'airport')" checked="checked"/>
                    <img src="icons/airport.png" width="32" height="37">
                    <input type="checkbox" id="chk_fitness" class="checkBox" onClick="boxclick(this,'fitness')" checked="checked"/>
                    <img src="icons/fitness.png" width="32" height="37"><br>
                    <input type="checkbox" id="chk_wellness" class="checkBox" onClick="boxclick(this,'wellness')" checked="checked"/>
                    <img src="icons/wellness.png" width="32" height="37">
                    <input type="checkbox" id="chk_shopping" class="checkBox" onClick="boxclick(this,'shopping')" checked="checked"/>
                    <img src="icons/shopping.png" width="32" height="37">
                    <input type="checkbox" id="chk_railway" class="checkBox" onClick="boxclick(this,'railway')" checked="checked"/>
                    <img src="icons/railway.png" width="32" height="37">
                    <input type="checkbox" id="chk_hotel" class="checkBox" onClick="boxclick(this,'hotel')" checked="checked"/>
                    <img src="icons/hotel.png" width="32" height="37">
                    <label for="checkbox"></label>
                  </p>
                  <p>
                    <input name="chk_all" type="checkbox" class="checkBox" onClick="showHideAll(this);" value="" checked id="chk_all">
                    Alle Kategorien anzeigen</p>
				</div>
		</div>
        
        <!-- CONTENT: Ihr Weg zu uns -->
		<div id="route">
              <h3><a id="routeHead" href="#">Ihr Weg zu uns</a></h3>
              <div>
                    <center>
                        <input type="text" class="inputField" name="txt_yourhome" id="txt_yourhome">
                        <br>
                        <input type="button" name="button" class="button" id="button"
                        value="Route berechnen" onClick="myRoute();">
                        <input type="button" name="button2" class="button" id="buttonPrint"
                        value="Drucken" style="display:none;" onClick="printRoute();">
                    </center>
                    
                    <div class="infoDiv">
                    	Berechnen Sie schnell und einfach den Weg zu unserer Firmenzentrale!
                    </div>  
        	   </div>
		</div>
        
        <!-- CONTENT: Karte ausrichten -->    
		<div id="goTo">
				<h3><a id="gotoHead" href="#">Karte ausrichten</a></h3>
				<div>
					  <center>
                          <select name="select" id="select" class="selectBox">
                                <option onClick="goTo(geo_nord, 8);" value="nord">Nordeutschland</option>
                                <option onClick="goTo(geo_sued, 8);"value="sued">Süddeutschland</option>
                                <option onClick="goTo(geo_west, 8);"value="west">Westdeutschland</option>
                                <option onClick="goTo(geo_ost, 8);"value="ost">Ostdeutschland</option>
                                <option onClick="goTo(geo_deutschland, 7);" value="ost">Deutschland</option>
                                <option onClick="goTo(geo_home, 17);"value="home">Home Office</option>
                                <option onClick="map.fitBounds( latlngbounds );"value="all">Alle Kunden anzeigen</option>
                          </select>
                      </center>
                      
                      
                      <div class="infoDiv">
                	  	  Berechnen Sie schnell und einfach den Weg zu unserer Firmenzentrale!
                	  </div>
                      
                </div>
		</div>
	</div>

  </div>

</body>

</html>